<template>
	<view>
        <u-popup  v-model="yuepopshow" mode="center" width="80%" ref="auth" :closeable="false" :mask-close-able="true" :custom="true" :mask-click="false" @close="closeyue">
          <view class="pop">
            <view class="jishupop">
                <image class="img_yueji" src="@/pages_client/static/img/img_yueji.png" />
                <text class="jiname">团队成员越级提醒</text>
                <view class="nitem">
					<view class="nione">
						<image class="tous" :src="popinfo.avatar" />
						<view class="niright">
							<view class="rione">
								<text class="riname txt">{{popinfo.nickname}}</text>
								<text class="hyuan">{{popinfo.group_name}}</text>
							</view>
							<view class="rione mttwo">
								<text class="idname txt">ID:{{ popinfo.user_id }}</text>
							</view>
						</view>
					</view>
                </view>  
                <view class="tmiao">
                    <text class="chyu">团队成员于 {{popinfo.time}}  </text>
                    <text class="chyutwo">{{popinfo.text}}</text>
                </view>
                <view class="kaobtn">
                    <view class="btns bjaio" @click="closeyue">知道了</view>
                </view>
            </view>
          </view>
        </u-popup> 
	</view>
</template>

<script>
	export default {
		name: 'YuejiPop',
		props: {
			yuepopshow: {
				type: Boolean,
				default: false
			},
            popinfo:{
                type: Object,
				default: {}
            }

		},
		data() {
			return {
                quanshow:false,
                name: '',
                quanlist: [
					{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
                value: 1,
                jishushow:false
			};
		},
		created() {
			
		},
		mounted() {

		},
		methods: {
            closeyue(){
                this.$emit("closeyue")
            },
            getxuanmen(){
                this.$emit("getxuanmen")
            },
            getkucun(){
                this.navrouter("/pages_client/twoPage/KucunShop");
            }

		}
	};
</script>

<style lang="scss" scoped>
    /deep/.u-drawer-bottom{
        background-color: transparent;
    }
    /deep/ .select .u-drawer-bottom{
        background-color: #fff !important;
    }
    .img_yueji{
        width: 207rpx;
        height: 170rpx;
        position: relative;
        margin-top: -90rpx;

    }
    .pop{
        padding-top: 100rpx;
        position: relative;
        top: -20px;
        // top: -50rpx;
        // margin-top: -100rpx;
    }
    .jishupop{
        width: 100%;
        // height: 420rpx;
        background: #FFFFFF;
        border-radius: 24rpx;
        padding: 30rpx 30rpx 40rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        // justify-content: center;
        
        .jiname{
            font-weight: bold;
            font-size: 36rpx;
            color: #1A1A1A;
            margin: 30rpx;
            display: block;
            text-align: center;
            margin: 0rpx 0 30rpx;
        }
        .jianum{
            font-weight: bold;
            font-size: 40rpx;
            color: #666666;
            display: block;
            margin-bottom: 20rpx;
        }
        .jiamiao{
            font-weight: 500;
            font-size: 28rpx;
            color: #666666;
            display: block;
            text-align: center;
        }
        .kaobtn{
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            margin-top: 50rpx;
            .btns{
                width: 46%;
                height: 78rpx;
                background: #F3F3F3;
                border-radius: 16rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 500;
                font-size: 28rpx;
                color: #1A1A1A;
            }
            .bjaio{
                background: #52443B;
                color: #fff;
            }
        }
    }
    .tmiao{
        display: flex;
        flex-direction: column;
        align-items: center;
        .chyu{
            font-weight: 500;
            font-size: 20rpx;
            color: #FC5757;
            display: block;
            margin: 10rpx 0 5rpx;
        }
        .chyutwo{
            font-weight: bold;
            font-size: 28rpx;
            color: #FC5757;
        }
    }

    .nitem{
        padding: 20rpx 25rpx;
        background: #F5F5F5;
        border-radius: 16rpx;
        width: 100%;
        .nione{
            display: flex;
            flex-direction: row;
            align-items: center;
            .tous{
                width: 81rpx;
                border-radius: 50%;
                height: 81rpx;
                margin-right: 15rpx;
            }
            .niright{
                width: 65%;
                display: flex;
                flex-direction: column;
                .rione{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    .riname{
                        max-width: 80%;
                        display: inline-block;
                        font-weight: bold;
                        font-size: 32rpx;
                        color: #333333;
                    }
                    .hyuan{
                        // width: 80rpx;
                        // height: 32rpx;
                        padding: 4rpx 20rpx;
                        background: linear-gradient(-90deg, #272727, #4D4D4D);
                        border-radius: 6rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-weight: 500;
                        font-size: 22rpx;
                        color: #FFFFFF;
                        margin-left: 10rpx;
                    }
                    .idname{
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #999999;
                    }
                    .hui{
                        margin-left: 40rpx;
                    }

                }
                .mttwo{
                    margin-top: 15rpx;
                }
            }
            .comm_icon_next{
                margin-left: auto;
                width: 24rpx;
                height: 24rpx;
            }
        }
    }
</style>
